<template>
  <!-- 分配线索对话框 -->
  <el-dialog title="分配线索" :visible="allotShow" width="618px" append-to-body :close-on-click-modal="false" @open="getUserList" @close="closeDailog">
    <div class="tip-box">
      您选择了 <span class="num">{{ num }}</span> 个线索，请选择人员进行分配
    </div>
    <el-form ref="form" label-width="80px" class="cus-search-box cus-dialog-form-box" :model="form">
      <el-form-item label="部门" prop="deptId">
        <treeselect :value="form.deptId" :options="options" placeholder="请选择部门" @select="getUserList" />
      </el-form-item>
      <el-form-item label="用户" prop="userName">
        <el-select v-model="form.userName" filterable placeholder="请选择用户">
          <el-option
            v-for="item in userList"
            :key="item.userName"
            :label="item.userName"
            :value="item.userName"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button class="cus-reset-btn" @click="closeDailog">取 消</el-button>
      <el-button type="primary" @click="allocationClue">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getUserListApi, alloClueApi } from '@/api/clue'
import { Message } from 'element-ui'
export default {
  components: {
    Treeselect
  },
  props: {
    allotShow: {
      type: Boolean,
      required: true
    },
    num: {
      type: Number,
      required: true
    },
    arr: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      options: [],
      form: {
        clueId: null,
        deptId: null, // 部门
        deptName: null,
        userName: null// 用户
      },
      userList: [] // 用户列表
    }
  },
  methods: {
    /**
     * 获取用户列表
     */
    async getUserList(val) {
      if (!val) return
      this.arr.forEach(e => {
        e.deptId = val.id
        e.deptName = val.label
      })
      const res = await getUserListApi(val.id)
      if (res.code === 500) {
        Message.error('获取用户列表失败！')
        return
      }
      this.userList = res.data
    },
    /**
     * 点击确定分配
     */
    async allocationClue() {
      this.arr.forEach(e => {
        e.userName = this.form.userName
      })
      const res = await alloClueApi([...this.arr])
      if (res.code === 500) {
        Message.error('分配失败！')
        return
      }
      Message.success('分配成功！')
      this.closeDailog()
      this.$parent.getClueList()
    },
    /**
     * 关闭弹窗
     */
    closeDailog() {
      this.$emit('update:allotShow', false)
      this.$emit('updata:num', 0)
      this.$emit('updata:arr', [])
      this.form = {
        clueId: null,
        deptId: null, // 部门
        deptName: null,
        userName: null// 用户
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tip-box{
    margin-left: 10px;
    margin-bottom: 20px;
}
::v-deep .el-dialog__body{
    padding: 10px 10px;
}
 ::v-deep .vue-treeselect__control{
    width: 300px!important;
  }
  ::v-deep .vue-treeselect__menu{
    width: 300px!important;
  }
  ::v-deep .el-dialog__header{
    background: #8df;
  }
</style>
